.container{
    position: relative;
    width:80%;
    margin:auto;
}
.content{
    width:100%;
    height:400px;
    position: relative;
    overflow: hidden;
}

.main{
    right:-50%;
    opacity: 0;
    position: absolute;
    width:100%;
    height:100%;
    transition:all 0.8s;
    -webkit-transition:all 0.8s
}
.title{
    position: absolute;
    left:200px;
    top:100px;
    z-index: 10;
}
.title h2{
    color: #000;
    font-size: 30px;
    margin-left: 30px;
    transition: all 0.4s 0.6s;
    -webkit-transition: all 0.4s 0.6s;
}
.title h3{
    font-size: 20px;
    margin-left: -30px;
    transition: all 0.4s 0.6s;
    -webkit-transition: all 0.4s 0.6s;
}
.main img{
    width:100%;
    height:100%;
}
.controller{
    width:100%;
    height:13px;
    position: relative;
}
.item-i{
    position: relative;
    display: inline-block;
    width:14.2%;
    height:13px;
    float: left;
    background: #666;
}
.item-i img{
    width:100%;
    position: absolute;
    bottom:30px;
    opacity: 0;
    -webkit-transition: all 0.2s;
}

.item-i:hover{
    background: #222;
}
.item-i:hover img{
    opacity: 0.8;
    bottom: 13px;
    -webkit-box-reflect: below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(50%,transparent),
            to(rgba(255,255,255,0.3))
    );
}


.main-active{
    right:0;
    opacity: 1;
}
.title-active h2,.title-active h3{
    margin-left:0;
}
.item-i-active{
    background: #000;
}
.item-i-active:hover{
    background: #000;
}
.item-i-active:hover img{
    opacity: 0;
}

@media screen and (max-width: 960px) {
    .content{
        height:300px;
    }
    .title{
        position: absolute;
        left:100px;
        top:80px;
        z-index: 10;
    }
    .title h2{
        font-size: 22px;
        margin-left: 0;
        transition: all 0.4s 0.6s;
        -webkit-transition: all 0.4s 0.6s;
    }
    .title h3{
        font-size: 20px;
        margin-left: -30px;
        transition: all 0.4s 0.6s;
        -webkit-transition: all 0.4s 0.6s;
    }
}